<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="logo">
            <figure>
                <img src="images/logo.jpg" alt="log">
            </figure>
        </div>
        <nav>
            <ul>
                <li><a href="#">导航链接一</a></li>
                <li><a href="#">导航链接二</a></li>
                <li><a href="#">导航链接三</a></li>
                <li><a href="#">导航链接四</a></li>
            </ul>
        </nav>
    </header>

   <div class="wrapper">
        <div class="article">
            <article>
                <h2>文章一级标题</h2>
                <h3>文章二级标题</h3>
                 <h4>文章作者  文章发表时间</h4>
                <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,
                    这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落, 换行了<br/>
                    这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,
                    这是一个很长很长的段落,这是一个很长很长的段落,换行了<br/>
                    这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com" target="_self">
                        这里有一个链接链接到 http://ife.baidu.com</a> 这是一个很长很长的段落,这是一个很长很长的段落,<b>这里有个粗体字</b>
                    这是一个很长很长的段落,  这是一个很长很长的段落,  这是一个很长很长的段落,  这是一个很长很长的段落,
                    这是一个很长很长的段落,  这是一个很长很长的段落,  这是一个很长很长的段落。
                </p>
                <img src="images/1.jpg" alt="图片" width="300" height="242">
                <p>  这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,
                这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,
                换行了<br/>
                这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落,<b>这里有个粗体字</b>
                这是一个很长很长的段落,这是一个很长很长的段落,<a href=" http://ife.baidu.com" target="_blank">
                    这里有一个链接点击打开后链接到 http://ife.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,
                这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,
                这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,
                这是一个很长很长的段落。
            </p>
            </article>
        </div>

       <div class="article article1">
           <article>
               <h2>文章一级标题</h2>
               <h3>文章二级标题</h3>
               <h4>文章作者  文章发表时间</h4>
               <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,
                   这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落, 换行了<br/>
                   这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,
                   这是一个很长很长的段落,这是一个很长很长的段落,换行了<br/>
                   这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com" target="_self">
                       这里有一个链接链接到 http://ife.baidu.com</a> 这是一个很长很长的段落,这是一个很长很长的段落,<b>这里有个粗体字</b>
                   这是一个很长很长的段落,  这是一个很长很长的段落,  这是一个很长很长的段落,  这是一个很长很长的段落,
                   这是一个很长很长的段落,  这是一个很长很长的段落,  这是一个很长很长的段落。
               </p>
               <figure>
                   <img src="images/1.jpg" alt="图片" width="300" height="242">
               </figure>
               <ul>
                   <li>
                       列表项目一
                   </li>
                   <li>
                       列表项目二
                   </li>
                   <li>
                       列表项目三
                   </li>
               </ul>
           </article>
       </div>

       <div class="images">
           <h2>图片</h2>
            <div class="image">
                <figure>
                    <figcaption>
                        好看的图片
                    </figcaption>
                    <img src="images/2.jpg" alt="图片">
                </figure>
            </div>
           <div class="image">
               <figure>
                   <figcaption>
                       好看的图片
                   </figcaption>
                   <img src="images/2.jpg" alt="图片">
               </figure>
           </div>
           <div class="image">
               <figure>
                   <figcaption>
                       好看的图片
                   </figcaption>
                   <img src="images/2.jpg" alt="图片">
               </figure>
           </div>
           <div class="image">
               <figure>
                   <figcaption>
                       好看的图片
                   </figcaption>
                   <img src="images/2.jpg" alt="图片">
               </figure>
           </div>
           <div class="image">
               <figure>
                   <figcaption>
                       好看的图片
                   </figcaption>
                   <img src="images/2.jpg" alt="图片">
               </figure>
         </div>
           <div class="image">
               <figure>
                   <figcaption>
                       好看的图片
                   </figcaption>
                   <img src="images/2.jpg" alt="图片">
               </figure>
           </div>
           <div class="image">
               <figure>
                   <figcaption>
                       好看的图片
                   </figcaption>
                   <img src="images/2.jpg" alt="图片">
               </figure>
           </div>
           <div class="image">
               <figure>
                   <figcaption>
                       好看的图片
                   </figcaption>
                   <img src="images/2.jpg" alt="图片">
               </figure>
           </div>
           <div class="image">
               <figure>
                   <figcaption>
                       好看的图片
                   </figcaption>
                   <img src="images/2.jpg" alt="图片">
               </figure>
           </div>
           <div class="image">
               <figure>
                   <figcaption>
                       好看的图片
                   </figcaption>
                   <img src="images/2.jpg" alt="图片">
               </figure>
           </div>
       </div>

       <div class="article2">
           <h2>最后一篇文章一级标题</h2>
           <h3>文章二级标题</h3>
           <h4>文章作者  文章发表时间</h4>
           <ol type="1">
               <li>排名1</li>
               <li>排名2</li>
               <li>排名3</li>
           </ol>
           <div class="table">
               <caption>下面是一个表格，给表格加了一个border="1"好让你看出是表格,你们不用写html时候不用加</caption>
               <table border="1">
                   <thead>
                   <tr>
                       <th>表头</th>
                       <th>表头</th>
                       <th>表头</th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr>
                       <td>表内容单元格</td>
                       <td>表内容单元格</td>
                       <td><a href="#">操作</a></td>
                   </tr>
                   <tr>
                       <td>表内容单元格</td>
                       <td>表内容单元格</td>
                       <td><a href="#">操作</a></td>
                   </tr>
                   <tr>
                       <td>表内容单元格</td>
                       <td>表内容单元格</td>
                       <td><a href="#">操作</a></td>
                   </tr>
                   <tr>
                       <td>表内容单元格</td>
                       <td>表内容单元格</td>
                       <td><a href="#">操作</a></td>
                   </tr>
                   </tbody>
                   <tfoot>
                   <tr>
                       <td colspan="3">总计 <span>1000</span></td>
                   </tr>
                   </tfoot>
               </table>
           </div>
       </div>

      <div class="aside">
          <div class="title">
              <h3>这里以后是一个侧栏，这是侧栏的标题</h3>
          </div>
          <div class="form">
              <form>
                  <div class="form1">
                      <div class="form11">
                          <label for="email" class="formstyle">请输入邮箱地址</label>
                          <label for="password1" class="formstyle">请输入密码</label>
                          <label for="password2" class="formstyle">请重复输入密码</label>
                          <label class="formstyle">性别</label>
                          <label for="city">城市</label>
                          <label>爱好</label>
                          <label for="description">个人描述</label>
                      </div>
                      <div class="form12">
                          <input type="text" name="email" id="email" value="这是一个文本输入框">
                          <p>邮箱地址请按要求格式输入</p>
                          <input type="password" name="password" id="password1" value="1234567" >
                          <input type="password" name="password" id="password2" value="1234567" >
                          <p class="formstyle">密码请为6-16位数字</p>
                          <input type="radio" name="sex" value="male" checked>男
                          <input type="radio" name="sex" value="female">女
                          <select id="city" name="city">
                              <option value="beijing" >北京</option>
                              <option value="shanghai">上海</option>
                              <option value="nankjing">南京</option>
                          </select>
                          <input type="checkbox" name="sport" value="sport">运动
                          <input type="checkbox" name="art" value="art">艺术
                          <input type="checkbox" name="science" value="science">科学
                          <textarea id="description">  这是一个多行输入框，输入您的个人描述
                          </textarea>
                      </div>
                  </div>
                  <button type="submit">确认提交</button>
                  </form>
          </div>
      </div>
   </div>

    <footer>
            <div class="foot">
                <p>版权所有©</p>
            </div>
    </footer>
</body>
</html>